<template>
	<div>
		<label>
			<input type="radio" name="status" v-model="type" value="0" />
			全部({{ todoList.length }})
		</label>
		<label>
			<input type="radio" name="status" v-model="type" value="1" />
			未完成({{ unFinished.length }})
		</label>
		<label>
			<input type="radio" name="status" v-model="type" value="2" />
			已完成({{ finished.length }})
		</label>
	</div>
</template>
<script setup>
import { computed, ref, watch } from "vue"

import { useTodoStore } from "../stores/todo-store"

// 默认选中
const type = ref("0")

const todoStore = useTodoStore()
const todoList = todoStore.todoList

// 未完成数量
const unFinished = computed(() => {
	return todoList.filter((item) => item.isFinished === false)
})

// 已完成数量
const finished = computed(() => {
	return todoList.filter((item) => item.isFinished === true)
})

// 监听 type 的变化 更新最新的type数据
watch(type, (newType) => {
	todoStore.setFilterType(newType)
})
</script>
